<template>
  <div >
    <el-form :inline="true"   :ref="route" :model="route"  :rules="rules"  class="demo-form-inline">

      <el-row>
        <el-col :span="2.5">
          <b>|案件收支</b>

        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="10">
          收支日期:{{route.cwEnteringdate}}
        </el-col>
        <el-col :span="10">
          收支金额: {{route.cwInoutMoney}}元
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="10">
          代理费:{{caseAgencyfee}}元
        </el-col>
        <el-col :span="10">
          已收款: {{casePaidsal}}元(已经收到的款)
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="10">
          已开发票:{{caseInvoiced}}元(已经开出的发票)
        </el-col>
      </el-row>


      <br>
      <el-row>
        <el-col :span="10">
          <el-form-item label="收支类别:" prop="cwInoutTypeId">
            <el-cascader Cascader clearable :options="options" placeholder="请选择收支类别"  v-model="route.cwInoutTypeId" :show-all-levels="false" :props='{label:"cwName",value:"id",emitPath:false}'></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="支付方式:" prop="cwPayType">
            <el-select v-model="route.cwPayType" placeholder="请选择支付方式" clearable>
              <el-option label="请选择支付方式" value=""></el-option>
              <el-option v-for="(item,index) in zhifufangshi" :key="index" :label="item.zfname" :value="item.zfid"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <br>
      <el-row>
        <el-col :span="10">
          <el-form-item label="付款人:" prop="cwPayer">
            <el-input v-model="route.cwPayer" placeholder="请选择付款人" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="10">
          备注:<br>
          <el-input type="textarea" v-model="route.cwRemark" style="width: 900px"></el-input>
        </el-col>
      </el-row>


      <br>
      <el-row>
        <el-col :span="6">
          <b>  主办律师:</b>
          {{userRealname}}
        </el-col>

        <el-col :span="6">
          <b>  分成额度:</b>
          {{cwPerformancesplit}}
        </el-col>

        <el-col :span="8">
          <b>  实际业绩:</b>
          {{route.cwInoutMoney}}元
        </el-col>
      </el-row>


      <el-col>
        <el-button type="primary" plain @click="onsubmit(route)">下一步</el-button>
      </el-col>
    </el-form>

    <el-dialog
        title="请扫码支付"
               :visible.sync="this.erweima"
        width="15%"
        :before-close="handleClose"
     >
      <s12 v-bind:message="this.route.cwInoutMoney"  ></s12>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>


  </div>

</template>

<script>
//注册付款组件
import   s12 from  './s12';
export default {
  components:{s12},
  name: "CwInoutLURUtianjia"
  , data() {
    return {
      setinterval:"", //定时器
       erweima:false, //判断付款二维码是否显示
      userRealname:JSON.parse(localStorage["user"])[0].userRealname,//登陆者的名称
      //登录者的id
      empid: JSON.parse(localStorage["user"])[0].hrEmpId,
      cwPerformancesplit:"",//分成额度
      route: {
        cwInoutTypeId:"",//收支类别
        cwInoutDate:"",//发生日期
        cwInoutPerson:JSON.parse(localStorage["user"])[0].hrEmpId,//收支人
        cwInoutMoney:"",//收款金额
        cwPayType:"",//支付方式
        caseLawId: "",//案件id
        cwEnteringdate:"",//录入日期
        cwRemark:"",//备注
        cwPayer:"",//付款人
      },
      anjian: "",   //显示不作处理  案件名称
      casePaidsal:"",//已收款
      caseAgencyfee:"",//代理费
      caseInvoiced:"", //发票金额

      options:[]  ,      //递归数据  收支类别
      zhifufangshi:[] ,//支付方式
      rules: {

        cwInoutTypeId: [
          {required: true, message: '收支类型不能为空', trigger: 'change'}
        ],
        cwPayType:[
          {required: true, message: '支付方式不能为空', trigger: 'change'}
        ]

      }
    }
  },
  methods: {
    //提交
    onsubmit(route){
      this.$refs[route].validate((valid) => {
        if (valid) {
          //支付方式为支付宝
           if(this.route.cwPayType=="6"){
            //显示二维码
             this.erweima=true;
               //启动定时器 轮询 判断是否支付成功
         this.setinterval=   setInterval(this.lunxunzhifu,1000);
             }

        } else {
          alert("验证错误")
        }

      })
    },
    //轮询 查询是否支付成功
    lunxunzhifu(){
      this.$http.get("/lunxun").then(res=>{
        console.log("是否支付成功的状态"+res.data)
          //轮询的状态 交给 this.zhifu
        //如果支付成功后   销毁定时器  并且添加 跳页面
        if(true==res.data){
          //销毁定时器
          clearTimeout(this.setinterval);
          //关闭二维码
          this.erweima=false;
          //并提醒 支付成功
          this.$message('支付成功');
          //付款成功开始添加
      //    console.log(this.route.cwInoutTypeId)
          this.$http.post("/cwInout",this.route).then(res=>{
            if(res.data.status==20000){
              alert("录入成功--即将进入详情页面")
              this.$router.push({name:'cwinoutlurutianjiahou',query:{"caseLawId":this.route.caseLawId}})
            }else{
              alert("添加有误")
            }
          })
 }
      })
    },
    //收支类型的数据
    digui(){
      this.$http.get('/cwInoutType/mo')
          .then(res =>{this.options=res.data.data
            //  console.log(this.options)
          })
    },
    //把传过来的对象交给route对象里面
    getli() {
      this.anjian=  this.$route.query. anjian,   //显示不作处理  案件名称
          this.route .   caseLawId=this.$route.query.caseLawId ,//案件id
          this.  casePaidsal= this.$route.query.casePaidsal,//已收款
          this.route .   cwInoutMoney=this.$route.query.cwInoutMoney ,//收款金额
          this.route .  cwEnteringdate=this.$route.query. cwInoutDate,//录入日期
          this.route .  cwInoutDate=this.$route.query. cwInoutDate,//发生日期
          this.  caseAgencyfee=this.$route.query. caseAgencyfee,//代理费
          this.  caseInvoiced=this.$route.query.caseInvoiced //发票金额


    },    //支付方式
    cwZffs(){
      this.$http.get('/cwZffs')
          .then(res =>{this.zhifufangshi=res.data.data
            //    console.log(this.zhifufangshi)
          })
    },
    //拿案件id  去 cw_performancesplit 表找分成额度
    cwPerformancesplits(){
      this.$http.get(`/cwPerformancesplit/empidANDcawid`,{params:{
          //登录者的id
          hrEmpId: JSON.parse(localStorage["user"])[0].hrEmpId,
           //案件id
          caseLawId:this.route.caseLawId
        }}).then(res=>{
        //判断是否为 百分比 如果为百分比 则使用% 否则使用元
        if("百分比"==res.data.data[0].cwSplitType){
          var s= res.data.data[0].cwPerformancesplit
          s+="%"
          this.cwPerformancesplit=s;
        }else{
          var sa= res.data.data[0].cwPerformancesplit
          sa+="元"
          this.cwPerformancesplit=sa;
        }
      })
    },
    handleClose() {
      this.$confirm('确认关闭？')
          .then(res=> {
          this.erweima=false
            //销毁定时器
            clearTimeout(this.setinterval);
            console.log(res)
          })
          .catch(res=> {console.log(res)});
    }

  },
  created() {
    this.getli();  //渲染父亲传过来的数据
    this.digui();//递归 收支类别
    this.cwZffs();// 支付方式
    this.cwPerformancesplits();//分成额度
  }
}
</script>

<style scoped>
.el-input{
  width: 400px;

}
.el-cascader{
  width: 300px;
}
.el-select{
  width: 300px;
}
</style>